<div style="padding:24px;">
  <p  class="page-title" routerLink="../list">
    <i class="anticon anticon-left-circle-o"></i> <span>新建卡券</span>
  </p>

  <form nz-form [formGroup]="validateForm">
    <div class="content bg-white">
      <div class="bx-form">
        <p class="bx-form_title">基本信息</p>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>卡券名称</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('card_coupons_name')" class="bx-form-item_content">
            <nz-input [nzType]="'text'" formControlName="card_coupons_name" [nzPlaceHolder]="'请输入卡券名称'" [nzSize]="'large'"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('card_coupons_name').dirty&&getFormControl('card_coupons_name').hasError('required')">请输入卡券名称</div>
            <div nz-form-explain *ngIf="getFormControl('card_coupons_name').dirty&&getFormControl('card_coupons_name').hasError('maxlength')">卡券名称不能超过30个字</div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>减免金额</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('face_value')" class="bx-form-item_content">
            <nz-input-number
              formControlName="face_value"
              [nzPlaceHolder]="'请输入减免金额'"
              [nzSize]="'large'"
              [nzStep]="1"
              style="width: 100%;"></nz-input-number>
            <div nz-form-explain *ngIf="getFormControl('face_value').dirty&&getFormControl('face_value').hasError('required')">请输入减免金额</div>
            <div nz-form-explain *ngIf="getFormControl('face_value').dirty&&getFormControl('face_value').hasError('max')">减免金额不可超过999元</div>
            <div nz-form-explain *ngIf="getFormControl('face_value').dirty&&getFormControl('face_value').hasError('min')">减免金额不可小于1元</div>
            <div nz-form-explain *ngIf="getFormControl('face_value').dirty&&getFormControl('face_value').hasError('notInteger')">减免金额必须为正整数</div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>有效期</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('term_of_validity_type')" class="bx-form-item_content">
            <nz-radio-group formControlName="term_of_validity_type">
              <label nz-radio [nzValue]="1">
                <span>
                  <span class="radio-text">固定时间段</span>
                  <div nz-form-control
                       class="time-slot"
                       [nzValidateStatus]="getFormControl('term_of_validity_time_start')" *ngIf="validateForm.value.term_of_validity_type === 1">
                    <nz-datepicker
                    formControlName="term_of_validity_time_start"
                    (ngModelChange)="_startDate=$event;_startValueChange()"
                    [ngModel]="_startDate"
                    [nzDisabledDate]="_disabledStartDate" nzShowTime
                    [nzFormat]="'YYYY-MM-DD'"
                    [nzPlaceHolder]="'起始时间'"></nz-datepicker>
                  </div>
                  <div nz-form-control
                       class="time-slot"
                       [nzValidateStatus]="getFormControl('term_of_validity_time_end')" *ngIf="validateForm.value.term_of_validity_type === 1">
                    <nz-datepicker
                      formControlName="term_of_validity_time_end"
                      (ngModelChange)="_endDate=$event;_endValueChange()"
                      [ngModel]="_endDate"
                      [nzDisabledDate]="_disabledEndDate" nzShowTime
                      [nzFormat]="'YYYY-MM-DD'"
                      [nzPlaceHolder]="'结束时间'"></nz-datepicker>
                  </div>
                </span>
              </label>
              <label nz-radio [nzValue]="2">
                <span class="radio-text">领取后</span>
                <span *ngIf="validateForm.value.term_of_validity_type === 2">
                  <nz-select
                    style="width: 120px;"
                    [nzPlaceHolder]="'请选择天数'"
                    formControlName="term_of_validity_start">
                    <nz-option
                      *ngFor="let option of options"
                      [nzLabel]="option"
                      [nzValue]="option"></nz-option>
                  </nz-select>
                   天生效，有效天数
                  <nz-input-number
                    formControlName="term_of_validity"
                    [nzMin]="1"
                    [nzStep]="1"
                    (nzBlur)="termOfValidity = true;"></nz-input-number> 天
                </span>
              </label>
            </nz-radio-group>
            <div nz-form-explain *ngIf="!termOfValidity" class="red">请设置有效期</div>
            <div nz-form-explain *ngIf="getFormControl('term_of_validity').dirty&&getFormControl('term_of_validity').hasError('max')">有效天数不可超过9999天</div>
          </div>

        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>卡券库存</label>
          </div>
          <div nz-form-control class="bx-form-item_content">
            <nz-radio-group formControlName="in_stock_type">
              <label nz-radio [nzValue]="0">
                <span>
                  <span class="radio-text">无限制</span>
                </span>
              </label><br>
              <label nz-radio [nzValue]="1">
                <span>
                  <span class="radio-text">限制</span>
                  <span *ngIf="validateForm.value.in_stock_type === 1"> <nz-input-number
                    style="width: 120px;"
                    formControlName="in_stock"
                    [nzStep]="1"
                    [nzMin]="1"
                    [nzPlaceHolder]="'请输入数字'"
                    (nzBlur)="inStockValidators(validateForm.value.in_stock)"
                    [nzSize]="'large'"></nz-input-number> 张</span>
                </span>
              </label>
              <div nz-form-explain class="red" *ngIf="inStockValidity === 1">数量不可为空</div>
              <div nz-form-explain class="red" *ngIf="inStockValidity === 2">数量不可超过99999999</div>
            </nz-radio-group>

          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>每人可领取数量</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('condition_receive_quantity')" class="bx-form-item_content">
            <nz-input-number
              style="width: 155px;"
              formControlName="condition_receive_quantity"
              [nzMin]="0"
              [nzStep]="1"
              [nzPlaceHolder]="'请输入领取数量'"
              [nzSize]="'large'"></nz-input-number> 张
            <div nz-form-explain *ngIf="getFormControl('condition_receive_quantity').dirty&&getFormControl('condition_receive_quantity').hasError('required')">请输入领取数量</div>
            <div nz-form-explain *ngIf="getFormControl('condition_receive_quantity').dirty&&getFormControl('condition_receive_quantity').hasError('min')">领取数量不可低于1张</div>
            <div nz-form-explain *ngIf="getFormControl('condition_receive_quantity').dirty&&getFormControl('condition_receive_quantity').hasError('max')">领取数量不可超过255张</div>
            <div nz-form-explain *ngIf="getFormControl('condition_receive_quantity').dirty&&getFormControl('condition_receive_quantity').hasError('lower')">领取数量不可超过库存</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content bg-gray">
      <p class="bx-form_title">使用条件</p>
      <div nz-form-item nz-row>
        <div nz-form-label class="bx-form-item_label">
          <label>最低消费</label>
        </div>
        <div nz-form-control [nzValidateStatus]="getFormControl('condition_lower_limit')" class="bx-form-item_content">
          满 <nz-input-number
          style="width: 155px;"
          formControlName="condition_lower_limit"
          [nzMin]="0"
          [nzStep]="1"
          [nzPlaceHolder]="'请输入金额'"
          [nzSize]="'large'"></nz-input-number> 元可用
          <div nz-form-explain *ngIf="getFormControl('condition_lower_limit').dirty&&getFormControl('condition_lower_limit').hasError('required')">请输入最低消费金额</div>
          <div nz-form-explain *ngIf="getFormControl('condition_lower_limit').dirty&&getFormControl('condition_lower_limit').hasError('lower')">价格不可低于减免金额</div>
          <div nz-form-explain *ngIf="getFormControl('condition_lower_limit').dirty&&getFormControl('condition_lower_limit').hasError('min')">最低消费不可低于1元</div>
          <div nz-form-explain *ngIf="getFormControl('condition_lower_limit').dirty&&getFormControl('condition_lower_limit').hasError('max')">最低消费不可大于99999999元</div>
          <div nz-form-explain *ngIf="getFormControl('condition_lower_limit').dirty&&getFormControl('condition_lower_limit').hasError('notInteger')">最低消费必须为整数</div>
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label class="bx-form-item_label">
          <label>适用商品</label>
        </div>
        <div nz-form-control class="bx-form-item_content">
          <nz-radio-group formControlName="condition_use_in">
            <label nz-radio-button [nzValue]="1">
              <span>全场商品</span>
            </label><label nz-radio-button [nzValue]="2">
              <span>部分商品</span>
            </label><label nz-radio-button [nzValue]="3">
              <span>分类商品</span>
            </label>
          </nz-radio-group>
          <!-- 部分商品 -->
          <div *ngIf="validateForm.value.condition_use_in === 2" class="goods-content">
            <div *ngIf="!checkedGoodsTable.length" class="init-content">
              <button nz-button [nzType]="'primary'" (click)="addGoods()">
                <span><i class="anticon anticon-plus"></i> 添加商品</span>
              </button>
            </div>
            <div *ngIf="!!checkedGoodsTable.length" class="bg-white">
              <div class="operation-line">
                <button nz-button [nzType]="'primary'" (click)="addGoods()">
                  <span><i class="anticon anticon-plus"></i> 添加商品</span>
                </button>
              </div>
              <nz-table #nzTable
                        [nzDataSource]="checkedGoodsTable"
                        [nzPageSize]="99"
                        [nzIsPagination] = false
                        [nzScroll]="{ y: 300 }">
                <ng-template #nzFixedHeader>
                  <thead nz-thead>
                    <tr>
                      <th nz-th [nzWidth]="'110px'"><span>商品ID</span></th>
                      <th nz-th [nzWidth]="'120px'"><span>商品图片</span></th>
                      <th nz-th [nzWidth]="'220px'"><span>商品名称</span></th>
                      <th nz-th [nzWidth]="'150px'"><span>商品价格</span></th>
                      <th nz-th [nzWidth]="'150px'"><span>商品库存</span></th>
                      <th nz-th [nzWidth]="'70px'"><span></span></th>
                    </tr>
                  </thead>
                </ng-template>
                <tbody nz-tbody>
                <tr nz-tbody-tr *ngFor="let data of checkedGoodsTable;let i = index;">
                  <td nz-td>{{data.id}}</td>
                  <td nz-td><img src="{{aliyunOssOutputUrl+'/'+data.first_picture}}" alt=""></td>
                  <td nz-td style="width: 200px">{{data.name}}</td>
                  <td nz-td>{{data.price/1000}}</td>
                  <td nz-td>{{data.in_stock}}</td>
                  <td nz-td>
                    <span>
                      <a href="javascript:;" (click)="delCheckedGoods(i)"><i class="anticon anticon-close-circle"></i></a>
                    </span>
                  </td>
                </tr>
                </tbody>
              </nz-table>
            </div>
          </div>
          <!-- 分类商品 -->
          <div *ngIf="validateForm.value.condition_use_in === 3" class="goods-content type-content">
            <label nz-checkbox class="type-checkbox"
                   [ngModelOptions]="{standalone: true}"
                   *ngFor="let data of groupList"
                   [(ngModel)]="data.checked">
              <span>{{data.name}}</span>
            </label>
          </div>
          <div nz-form-explain *ngIf="!goodsValidity" class="red">请设置适用商品!</div>
          <div>
            <label nz-checkbox formControlName="condition_can_use_in_pt">
              <span>拼团商品可用</span>
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="content bg-white">
      <div class="bx-form">
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>备注</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('remark')" class="bx-form-item_content">
            <nz-input
              formControlName="remark"
              [nzType]="'text'"
              [nzPlaceHolder]="'请输入备注信息'"
              [nzSize]="'large'"></nz-input>
            <div nz-form-explain *ngIf="getFormControl('remark').dirty&&getFormControl('remark').hasError('required')">请输入备注信息</div>
            <div nz-form-explain *ngIf="getFormControl('remark').dirty&&getFormControl('remark').hasError('maxlength')">备注信息不可多于30个字</div>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-control class="bx-form-item_content">
            <button nz-button [nzType]="'primary'" [disabled]="!validateForm.valid" (click)="submitForm()">添加</button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<!-- 添加商品弹窗 start -->

<nz-modal
  [nzVisible]="goodsModalVisible"
  [nzTitle]="'添加商品'"
  [nzWidth]="'700px'"
  [nzContent]="modalContent"
  (nzOnCancel)="goodsModalVisible = false;"
  (nzOnOk)="confirmAddGoods()">
  <ng-template #modalContent>
    <div class="operate-line text-right" style="display:flex;justify-content: flex-end;align-items:center;">
      <span class="fl" style="margin-right:198px;">
           已选择<span class="color-blue">{{checkedGoods.length}}</span>个商品
      </span>
      <nz-select
        style="width: 110px;"
        nzAllowClear
        [nzPlaceHolder]="'请选择分类'"
        [(ngModel)]="selectedGroup"
        [nzShowSearch]="true">
        <nz-option
          *ngFor="let type of groupList"
          [nzLabel]="type.name"
          [nzValue]="type.id">
        </nz-option>
      </nz-select>
      <nz-input name="goodsName" style="width: 200px;" [(ngModel)]="goodsName" [nzPlaceHolder]="'输入商品名称'"></nz-input>
      <button style="margin-left:10px;" nz-button [nzType]="'primary'" (click)="searchGoods()">
        <span><i class="anticon anticon-search"></i> 搜索</span>
      </button>
    </div>
    <nz-table #nzTable
              [nzAjaxData]="goodsList"
              [nzLoading]="loading"
              [(nzPageIndex)]="page"
              [(nzPageSize)]="pageSize"
              [nzTotal] ="total"
              (nzPageIndexChange)="pageChange()">
      <thead nz-thead>
      <tr>
        <th nz-th nzCheckbox>
          <label nz-checkbox
                 [(ngModel)]="allChecked"
                 [nzIndeterminate]="indeterminate"
                 (ngModelChange)="checkAll($event)">
          </label>
        </th>
        <th nz-th><span>商品ID</span></th>
        <th nz-th><span>商品图片</span></th>
        <th nz-th><span>商品名称</span></th>
        <th nz-th><span>商品价格</span></th>
        <th nz-th><span>商品库存</span></th>
      </tr>
      </thead>
      <tbody nz-tbody>
      <tr nz-tbody-tr *ngFor="let data of goodsList">
        <td nz-td nzCheckbox>
          <label nz-checkbox [(ngModel)]="data.checked" (ngModelChange)="checkedSingle($event,data)">
          </label>
        </td>
        <td nz-td>{{data.id}}</td>
        <td nz-td><img src="{{aliyunOssOutputUrl+'/'+data.first_picture}}" alt=""></td>
        <td nz-td style="width: 150px">{{data.name}}</td>
        <td nz-td>{{data.price/1000}}</td>
        <td nz-td>{{data.in_stock}}</td>
      </tr>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>

<!-- 添加商品弹窗 end -->




